<template>
    <main-layout>
<div class="sort">
  
  <h2>分类</h2>
  <van-button @click="skill" color="linear-gradient(to right, #ff6034, #ee0a24)">
  休闲
</van-button>
<van-button @click="hot" color="linear-gradient(to right, #ff6034, #ee0a24)">
  热卖
</van-button>
<van-button @click="name" color="linear-gradient(to right, #ff6034, #ee0a24)">
  名著
</van-button>
<van-button @click="sale" color="linear-gradient(to right, #ff6034, #ee0a24)">
  特价
</van-button>
<van-button @click="children" color="linear-gradient(to right, #ff6034, #ee0a24)">
  儿童
</van-button>
</div>
<div class="bodys">

      <div class="container">
        <div class="booksList" v-for="item in list" :key="item.title">
          <img @click="moreEvt(item)" :src="item.src" alt="" />
          <div class="box-right">
            <div class="title">{{ item.title }}</div>
            <div class="price">￥{{ item.price }}</div>
            <button class="bth" @click="addCart(item)">加入购物车</button>
          </div>
        </div>
      </div>
    </div>
  </main-layout>
</template>
<script>
import MockService from "../../apis/Ajax";
import {Toast}from 'vant'

export default {
  data() {
    return {
      style: "skill",
      list: [
       {
        title: "梦的解析 弗洛伊德正版心理学入门书籍畅销书排行榜中国华侨出版社出品畅销书精神分析学说和潜意识理论的必读书基础社会心理学",
        price: "39.00",
        style: "skill",
        author: "Mr.ge",
        press: "中国四川成都千锋教育出版社",
        src: "https://img.alicdn.com/imgextra/i4/27766371/O1CN01JIR0Bu1wvy4izEcHV_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        name: "梦的解析 弗洛伊"
      }, {
        title: "中国商界风云人物全8册 马云我可以没有对手马化腾王石任正非传雷军史玉柱冯仑李嘉诚创业企业管理成功励志自传记大全套畅销书籍",
        price: "360.00",
        style: "skill",
        author: "Mr.liao",
        press: "中国重庆千锋教育出版社",
        src: "https://img.alicdn.com/imgextra/i4/16391187/O1CN01HGMaAQ1KdgjHbpgu3_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        name: "中国商界风云人物"
      }, {
        title: "西顿野生动物故事集全套共8册 3-4-5-6-8岁经典动物文学名著 小学生一二三四年级课外阅读书籍 老师推荐必读书西顿动物记彩图注音",
        price: "200.00",
        style: "skill",
        author: "Mr.liao",
        press: "中国重庆千锋教育出版社",
        src: "https://img.alicdn.com/imgextra/i4/31352071/TB2qEFZlv1TBuNjy0FjXXajyXXa_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        name: "西顿野生动物故事"
      }, {
        title: "《厚黑学-中国最成功的心理术与处世术》成功励志高情商做人做事成功励志书籍 厚黑学看这本就够了",
        price: "39.80",
        style: "skill",
        author: "Mr.liao",
        press: "中国重庆千锋教育出版社",
        src: "https://img.alicdn.com/imgextra/i2/1715630188/O1CN01kGv4Ue1DG98uBLM6V_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        name: "《厚黑学-中国最"
      }, {
        title: "月亮和六便士正版 六个便士 月亮与六便士 正版毛姆畅销书 精装书 小说原著文学书籍 无删减原版出版社原著名著图书读物",
        price: "38.00",
        style: "skill",
        author: "Mr.liao",
        press: "中国重庆千锋教育出版社",
        src: "https://img.alicdn.com/imgextra/i4/17580683/O1CN01oyrnoi1GurFO6pPS0_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        name: "月亮和六便士正版"
      }, {
        title: "演讲词(值全彩白金版)版演讲书受欢迎的演讲与口才秘术训练实用演讲词大全说话的艺术 查看标题打分",
        price: "68.00",
        style: "skill",
        author: "Mr.liao",
        press: "中国重庆千锋教育出版社",
        src: "https://img.alicdn.com/imgextra/i1/114084879/O1CN01ew7bKn1lud20MjWVE_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        name: "演讲词(值全彩白"
      }, {
        title: "宝宝巴士图书经典英文儿歌宝宝手指点读发声演奏书1-2-3岁儿童中英双语绘本早教学习亲子睡前共读互动玩具翻翻书益智启蒙早教机",
        price: "176.00",
        style: "skill",
        author: "Mr.liao",
        press: "中国重庆千锋教育出版社",
        src: "https://img.alicdn.com/imgextra/i1/1164490191/O1CN01RmRZlq1DHWM2ozYE9_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        name: "宝宝巴士图书经典"
      }, {
        title: "正版图书团购文艺社科名著小说学校图书馆公司阅览室馆配特价畅销书籍二手书优惠特价定制儿童书励志口才历史百科书单配货",
        price: "11.80",
        style: "skill",
        author: "Mr.liao",
        press: "中国重庆千锋教育出版社",
        src: "https://img.alicdn.com/imgextra/i3/110097286/O1CN01eHudGX23h2Sy7RpxZ_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        name: "正版图书团购文艺"
      }, {
        title: "官方正版 洛克菲勒写给儿子的38封信 孩子洛克菲洛38封家书诺克菲诺三十八封信家教育儿亲子书籍畅销书排行榜民主与建设出版社",
        price: "49.80",
        style: "skill",
        author: "Mr.liao",
        press: "中国重庆千锋教育出版社",
        src: "https://img.alicdn.com/imgextra/i3/113737577/O1CN016UlueQ25qJgSfrCEa_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        name: "官方正版 洛克菲"
      }, {
        title: "正版曹文轩纯美小说系列全套四五年级儿童文学草房子狗牙雨青铜葵花山羊不吃天堂草野风车细米马戏团红瓦黑瓦根鸟原著课外阅读书籍",
        price: "308.00",
        style: "skill",
        author: "Mr.liao",
        press: "中国重庆千锋教育出版社",
        src: "https://img.alicdn.com/imgextra/i3/29342775/O1CN01NclxNI1WMzop4iUd2_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        name: "正版曹文轩纯美小"
      }, {
        title: "正版现货包邮！玩儿 于谦相声作家 精装典藏版 郭论郭德纲作序未公开新章节相声界那些事现当代文学随笔书籍 博集天卷",
        price: "49.80",
        style: "skill",
        author: "Mr.liao",
        press: "中国重庆千锋教育出版社",
        src: "https://img.alicdn.com/imgextra/i1/47377476/O1CN01KH08l32563aA1W1qV_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        name: "正版现货包邮！玩"
      }, {
        title: "正版 别人不说你一定要懂的人情世故 社交礼仪书籍为人处事职场心理学 管理学书籍人际沟通说话厚黑学人际交往心理学成功励志书籍",
        price: "29.80",
        style: "skill",
        author: "Mr.liao",
        press: "中国重庆千锋教育出版社",
        src: "https://img.alicdn.com/imgextra/i3/111889069/O1CN01U2JrnQ2GreUHR4xVA_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        name: "正版 别人不说你"
      }, {
        title: "正版 爱的艺术弗洛姆 上海译文 刘福堂译 掌握爱的艺术亲密关系恋爱婚姻两性哲学 新华书店正版图书籍",
        price: "23.20",
        style: "skill",
        author: "Mr.liao",
        press: "中国重庆千锋教育出版社",
        src: "https://img.alicdn.com/imgextra/i4/14789935/O1CN01Pxos0J2NGHeMD0633_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        name: "正版 爱的艺术弗"
      }, {
        title: "哈利波特立体书中文珍藏版 正版乐乐趣世界名著经典童话 魔法学校3D立体书青少年小学生儿童阅读哈利波特童书魔法霍格沃茨故事书籍",
        price: "398.00",
        style: "skill",
        author: "Mr.liao",
        press: "中国重庆千锋教育出版社",
        src: "https://img.alicdn.com/imgextra/i3/106695131/O1CN01HI6wf91nm2orq0W9x_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        name: "哈利波特立体书中"
      }
      ],
    };
  },
  methods: {
    moreEvt(item) {
      var obj2 = {
        author: item.author,
        src: item.src,
        title: item.title,
        price: item.price,
        press: item.press,
        name: item.name,
      };
      sessionStorage.setItem("more", JSON.stringify(obj2));
      this.$router.push("/more");
    },
    async skill() {
      this.style = "skill";
      let good = await MockService.booksType(this.style);
      this.list = good.data;
      console.log(this.list);
    },
    async hot() {
      this.style = "hot";
      let good = await MockService.booksType(this.style);
      this.list = good.data;
      console.log(this.list);
    },
    async name() {
      this.style = "super";
      let good = await MockService.booksType(this.style);
      this.list = good.data;
      console.log(this.list);
    },
    async sale() {
      this.style = "sale";
      let good = await MockService.booksType(this.style);
      this.list = good.data;
      console.log(this.list);
    },
    async children() {
      this.style = "children";
      let good = await MockService.booksType(this.style);
      this.list = good.data;
      console.log(this.list);
    },

    addCart(item) {
      var obj = {
        id: item.id,
        src: item.src,
        title: item.title,
        price: item.price,
        num: 1,
        oneValue: false,
      };
      let open = false;
      let cartM = JSON.parse(sessionStorage.getItem("cartlist")) || [];
      console.log(cartM);
      this.cartList = cartM;
      //  for(item in cartM){
      //    if(item.title==obj.title){
      //       open=true
      //       return
      //    }
      //  }
      let index = "";
      for (let i = 0; i < cartM.length; i++) {
        if (cartM[i].title == obj.title) {
          open = true;
          index = i;
        }
      }
      if (!open) {
        this.cartList.push(obj);
      } else {
        this.cartList[index].num++;
      }
      sessionStorage.setItem("cartlist", JSON.stringify(this.cartList));
       Toast.success('加入成功')

      // this.$router.push("/cart");
    },
  },
};
</script>
<style lang="less" scoped>

.sort{
  width: 100%;
  margin-top: 15px;
  position: fixed;
  left: 0;
  top: -20px;
  z-index: 99;
  background-color: whitesmoke;
  h2{
    text-align: center;
  color: #69696d;
  background-color: whitesmoke;
  }
  .van-button{
    width: 20%;
  }
}
.headers {
  display: flex;
  position: relative;
  .photos {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 315px;
    top: 22px;
  }
  input {
    width: 330px;
    height: 35px;
    margin-left: 20px;
    margin-top: 20px;
  }
  div {
    display: flex;
    flex-flow: column;
    font-size: 0.75rem;
    margin-left: 15px;
    margin-top: 25px;
    img {
      width: 20px;
      height: 20px;
      margin-left: 2px;
    }
  }
}
.container {
  width: 100%;
  overflow-x: hidden;
  display: flex;
  height: 100%;
  max-width: 100%;
  flex-wrap:wrap ;
  justify-content: space-around;
  margin-top: 111px;
  .booksList {
    width: 48%;
    display: flex;
    flex-wrap:wrap ;
    margin-top: 20px;

    font-size: 0.9375rem;
    background-color: #fff;
    border-radius: 10px;

    img {
      height: 120px;
      border-radius: 15px;
      margin: 15px auto;
    }
    .box-right {
      width: 100%;
      height: 100px;
      overflow: hidden;
      background-color: #fff;
      border-radius: 15px;
      position: relative;
      margin-top: 20px;
      .title {
        margin-bottom: 25px;
        line-height: 20px;
        text-indent: 15px;
        margin-left: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .price {
        margin-left: 10px;
        margin-top: 35px;
        font-size: 15px;
        color: red;
      }
      .bth {
        width: 105px;
        height: 25px;
        background-color: red;
        color: #fff;
        border-radius: 10px;
        position: absolute;
        right: 12px;
        top: 55px;
        border: none;
      }
    }
  }

  .bodys{
    margin-bottom: 10px;
    width: 100%;
    display: grid;
    background-color: whitesmoke;
  }
}
</style>